.css ファイルを非同期で読み込む

流れは、

<link>タグはdocument.createElementを使って以下のように作れます。

const link = document.createElement('link');

Node としては存在しますが、まだ DOM 上にはない状態です。

.cssの読み込みなのでrelとhrefが必要ですね。以下のように設定します。

link.rel = 'stylesheet';
link.href = '...'; // url

<head>タグが存在するマークアップだとdocument.headで<head>タグを取得でき、クエリで取得する必要もない一番てっとり早い方法だと思います。なのでここに上記で作成したlinkを埋め込みます。

ある要素の下に要素を埋め込むにはNode#appendChildを使います。以下はそのコードです。

document.head.appendChild(link);

これでこのような HTML になるはずです。そして、 DOM に追加された瞬間にそのhrefに指定したファイルの取得が始まります。

<head>
  <link rel="stylesheet" href="...">
</head>

スタイルシートなので何かに依存しないと動かないといったことはあまりないと思いますが、知りたい場合はloadイベントを使います。これは.cssファイルの読み込みが終わったら発火するイベントなので、これを使えば読み終わったらアラート出すみたいなことができます。

link.addEventListener('load', () => {
  alert('読み込み完了');
});

document.head.appendChild(link);

DOM に埋め込む前に定義してください。

純